import React, { FC, useContext, useMemo, useState } from 'react';
import './JournalArticleList.less';
import HxButtonRadioGroup from '@/components/HxButtonRadioGroup';
import HxStList from '@/components/HxStList';
import { HxArticleNormalItem } from '@/components/HxArticleItem';
import { useRequest } from 'ahooks';
import * as API from '@/services';
import { Button, Pagination, Space, Spin } from 'antd';
import { JournalDetailContext } from '@/pages/JournalPage/JournalDetail/commons/JournalDetailContext';
import HxPagination from '@/components/HxPagination';
import { FormattedMessage } from 'umi';
import HxFlexibleArticleGrid from '@/pages/SearchPage/common/HxFlexibleArticleGrid';

interface JournalArticleListProps {}

const JournalArticleList: FC<JournalArticleListProps> = (props) => {
  const { journalId } = useContext(JournalDetailContext);
  const [filterType, setFilterType] = useState<'periodZ' | 'normal'>('normal');


  const additionalQuery = useMemo(() => {
    return {
      periodZ: filterType === 'periodZ' ? true : false,
      journalId: journalId,
    }
  }, [filterType]);

  return (
    <div className={'journal-article-list-container'}>
      <HxStList
        title={
          <HxButtonRadioGroup
            value={filterType}
            onChange={(e) => setFilterType(e.target.value)}
            options={[
              { label: <FormattedMessage id="text.sort.publication" />, value: 'normal' },
              { label: <FormattedMessage id="text.sort.released" />, value: 'periodZ' },
            ]}
          />
        }
      >
        <HxFlexibleArticleGrid
          additionalQuery={additionalQuery}
          showEggs={false}
        />
      </HxStList>
    </div>
  );
};

export default JournalArticleList;
